<template>
  <div>
    <div v-for="(Faitem,index) in geoArrs" :key="index">
      <!--门图层-->
      <div v-for="item in doorsArr" :key="item.doorId">
        <MglGeojsonLayer
          :sourceId="item.geoData.geoJsonSource.id"
          :source="item.geoData.geoJsonSource.source"
          :layer="item.geoData.geoJsonLayer"
          :layerId="item.geoData.layerId"
          :key="item.id"
        />
      </div>
      <div v-if="Faitem.floor == floors">
        <MglGeojsonLayer
          v-for="item in Faitem.geoData"
          :sourceId="item.geoJsonSource.id"
          :source="item.geoJsonSource.source"
          :layer="item.geoJsonLayer"
          :layerId="item.layerId"
          :key="item.id"
          :ref="item.layerId"
          @click="openMapPop(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Mapbox from "mapbox-gl";
import { MglMap, MglMarker, MglGeojsonLayer } from "vue-mapbox";

export default {
  name: '',
  props: {
    geoArrs: Array,
    doorsArr: Array,
    floors: String
  },
  components: {
    MglMap, MglGeojsonLayer
  },
  data() {
    return {
      accessToken: 'pk.eyJ1IjoibGFuZ2hhb2FiY2QiLCJhIjoiY2sxcjZ4aXg1MDI2MDNncWNxcHlvNDU0NyJ9.i05JLkyr2CsyJvFoMDzZmA', // your access token. Needed if you using Mapbox maps
      mapOptions: {
        mapStyle: 'mapbox://styles/mapbox/streets-v9',
        center: [121.46960637043458, 30.7913819151417],
        // maxBounds: [[121.45928724454387, 30.78519614578238], [121.47992549632482, 30.797567286556315]],
        zoom: 15.544687811205444,
        bearing: -20
      }
    }
  },
  methods: {
    onMapLoaded(event) {
      var map;
      map = event.map;
    },
    isShow(floor) {
      if (floor && floor == this.floors) {
        return true;
      } else {
        return false
      }
    }
  }
}
</script>
<style scoped>
.doorsGeo {
  z-index: 10;
}
</style>